<template>
  <div class="my_contain">
    <!-- 日期范围选择 -->
    <el-row class="row-time">
      <el-col style="width:91px;" class="col-time">
        <span>时间选择:</span>
        <!-- <span class="time-link">今天</span>260px
        <span class="time-link">本周</span>
        <span class="time-link">一月</span>
        <span class="time-link">半年</span> -->
      </el-col>
      <el-col style="width:365px;">
        <el-date-picker
          size="small"
          v-model="value2"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          align="right" @change="getTime">
        </el-date-picker>
      </el-col>
    </el-row>
    <el-row class="row-chart" :gutter="15">
      <el-col :span="6">
        <div class="col-chart-two">
          <div class="col-chart-title-two">
            <span>U盘风险值</span>
          </div>
          <div class="col-chart-main-two">
            <div style="width:100%;height:100%;" ref="liquidfill"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="col-chart">
          <div class="col-chart-title">
            <span>U盘使用频率</span>
          </div>
          <div class="col-chart-main">
            <div ref="line" style="width:100%;height:100%;"></div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="row-chart" :gutter="15">
      <el-col :span="8">
        <div class="col-chart">
          <div class="col-chart-title">
            <span>U盘操作排序</span>
          </div>
          <div class="col-chart-main">
            <div ref="pie" style="width:100%;height:100%;"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="col-chart">
          <div class="col-chart-title">
            <span>U盘使用终端</span>
          </div>
          <div class="col-chart-main">
            <div style="width:100%;height:100%;" id="tree"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="col-chart">
          <div class="col-chart-title">
            <span>U盘实时记录</span>
          </div>
          <div class="col-chart-main">
            <vue-seamless-scroll :data="listData" :class-option="optionSingleHeight" class="seamless-warp">
              <ul class="item">
                <li v-for="(item, index) in listData" :key="index">
                  <span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- <el-row class="row-chart" :gutter="15">
      <el-col :span="8">
        <div class="col-chart">
          <div class="col-chart-title">
            <span>U盘使用终端</span>
          </div>
          <div class="col-chart-main">
            <div style="width:100%;height:100%;" id="tree"></div>
          </div>
        </div>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'MimiUdiskInfo',
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '近半年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value2: '',
      listData: [{
        'title': '无缝滚动第一行无缝滚动第一行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第二行无缝滚动第二行',
        'date': '2017-12-16'
      }, {
          'title': '无缝滚动第三行无缝滚动第三行',
          'date': '2017-12-16'
      }, {
          'title': '无缝滚动第四行无缝滚动第四行',
          'date': '2017-12-16'
      }, {
          'title': '无缝滚动第五行无缝滚动第五行',
          'date': '2017-12-16'
      }, {
          'title': '无缝滚动第六行无缝滚动第六行',
          'date': '2017-12-16'
      }, {
          'title': '无缝滚动第七行无缝滚动第七行',
          'date': '2017-12-16'
      }, {
          'title': '无缝滚动第八行无缝滚动第八行',
          'date': '2017-12-16'
      }, {
          'title': '无缝滚动第九行无缝滚动第九行',
          'date': '2017-12-16'
      }],
      freqence: {}, // 近几天使用频率
      operation: {}, // 近几天U盘操作统计
      oper_data: [],
      terminal: [], // U盘使用终端统计
    }
  },
  created() {
    this.getAppdiskStatus(moment(new Date().getTime() - 3600 * 1000 * 24 * 3).format('YYYY-MM-DD HH:mm:ss'), moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss'))
    this.test()
  },
  computed: {
    optionSingleHeight () {
      return {
        singleHeight: 37
      }
    }
  },
  mounted() {
    // this.drawLine()
    this.drawLiquidfill()
    // this.drawPie()
    this.drawTree()
  },
  methods: {
    drawLine(){ // U盘使用频率折线图
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.line)
      // 绘制图表
      myChart.setOption({
        color: ['#c23531'],
        tooltip: {
          trigger:'axis'
        },
        dataZoom: [{
          type: 'inside'
        }, {
          type: 'slider',
          textStyle: {
            color: '#000'
          }
        }],
        xAxis: {
          type: 'category',
          data: this.freqence.freq_x,
          boundaryGap: false,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#000'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#000'
            }
          },
          // splitLine: {
          //   show:false
          // }
        },
        series: [{
          name: 'U盘使用频率',
          data: this.freqence.freq_y,
          type: 'line',
          smooth: true,
          // markPoint: {
          //   data: [
          //     {type: 'max', name: '最大值'},
          //     {type: 'min', name: '最小值'}
          //   ]
          // }
        }]
      });
    },
    drawLiquidfill(){ // U盘风险值 水球图
      // 基于准备好的dom，初始化echarts实例
      let liquidfill = this.$echarts.init(this.$refs.liquidfill)
      // 使用指定的配置项和数据显示图表
      liquidfill.setOption({
        tooltip: {
          show: true,
        },
          series: [{
            name: 'U盘风险值',
            type: 'liquidFill',
            radius: '200px',
            data: [0.6],
            label: {
              normal: {
                color: '#27e5f1',
                insideColor: '#fff',
                textStyle: {
                    fontSize: 40,
                    fontWeight: 'bold',
                }
              }
            },
            color: [{
              type: 'linear',
              x: 0,
              y: 1,
              x2: 0,
              y2: 0,
              colorStops: [{
                offset: 1,
                color: ['#6a7feb'], // 0% 处的颜色
              }, {
                offset: 0,
                color: ['#27e5f1'], // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }],
            outline: {
              show: true,
              borderDistance: 5,
              itemStyle: {
                borderColor: '#8fd3f4',
                borderWidth: 4
              }
            }
        }]
      })
    },
    drawPie(){ // U盘操作排序 饼图
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.pie)
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          // data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
          data: this.operation.oper_x
        },
        series: [
          {
            name: 'U盘操作统计',
            type: 'pie',
            radius: '65%',
            center: ['40%', '50%'],
            data: this.oper_data,
            // data: [
            //   {value: 335, name: '直接访问'},
            //   {value: 310, name: '邮件营销'},
            //   {value: 234, name: '联盟广告'},
            //   {value: 135, name: '视频广告'},
            //   {value: 1548, name: '搜索引擎'}
            // ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    drawTree() { // 树图
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('tree'))
      // 使用指定的配置项和数据显示图表
      myChart.setOption({
        tooltip: {
          show: true,
          formatter: '{a} <br/>{b} : {c}'
        },
        // legend: {
        //   orient: 'vertical',
        //   left: 'right',
        //   data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        // },
        series: [{
          name: 'U盘使用',
          type: "tree",
          // data: this.terminal,
          data:[{
            name: "0",
            children: [{
              department: '算法部',
              name: "WA20200911F0001-算法部",
              value: 40,
            }, {
              department: '算法部',
              name: "WA20200911F0001-算法部",
              value: 24,
            }, {
              department: '研发部',
              name: "WA20200911F0001-研发部",
              value: 33,
            }, {
              department: '综合部',
              name: "WA20200911F0001-综合部",
              value: 20,
            }],
          }],
          label: {
            show: true,
            position: 'top',
            verticalAlign: 'middle',
            align: 'right',
            fontSize: 11
          },
          symbol: "circle",
          symbolSize: 22,
          symbolRotate: 12,
          symbolKeepAspect: false,
          // layout: "radial"
        }]
      })
    },
    // drawTree() { // 树图
    //   // 基于准备好的dom，初始化echarts实例
    //   let myChart = this.$echarts.init(document.getElementById('tree'))
    //   // 使用指定的配置项和数据显示图表
    //   myChart.setOption({
    //     tooltip: {
    //       show: true
    //     },
    //     series: [{
    //       type: "tree",
    //       data: [{
    //         name: "root",
    //         children: [{
    //           name: "Child A",
    //           children: [{
    //             name: "Leaf C",
    //             itemStyle: {
    //               color: "green",
    //               borderColor: "green"
    //             },
    //           }, {
    //             name: "Leaf D"
    //           }, {
    //             name: "Leaf E"
    //           }, {
    //             name: "Leaf F"
    //           }],
    //           itemStyle: {
    //             color: "#cc302e",
    //             borderColor: "#efefef"
    //           },
    //         }, {
    //           name: "Child B",
    //           children: [{
    //             name: "Leaf G"
    //           }, {
    //             name: "Leaf H"
    //           }]
    //         }, {
    //           name: "Child D"
    //         }, {
    //           name: "Child F",
    //           children: [{
    //             name: "Leaf J"
    //           }, {
    //             name: "Leaf K"
    //           }]
    //         }],
    //         animation: true,
    //         animationEasing: "linear"
    //       }],
    //       label: {
    //         // position: "right",
    //         show: true,
    //         // color: "rgba(242, 12, 12, 1)"
    //       },
    //       symbol: "circle",
    //       symbolSize: 22,
    //       symbolRotate: 12,
    //       symbolKeepAspect: false,
    //       // roam: true,
    //       // itemStyle: {
    //       //   color: "rgba(77, 242, 215, 1)",
    //       //   borderColor: "rgba(48, 138, 222, 1)"
    //       // },
    //       // lineStyle: {
    //       //   color: "rgba(210, 30, 183, 1)"
    //       // },
    //       layout: "radial"
    //     }]
    //   })
    // },
    getTime(val) { // 时间选择器改变触发
      this.getAppdiskStatus(moment(val[0]).format('YYYY-MM-DD HH:mm:ss'), moment(val[1]).format('YYYY-MM-DD HH:mm:ss'))
    },
    getAppdiskStatus (start, end) { // 根据 id 查询U盘状态详情展示
      this.$API({
        name: 'getAppdiskStatus',
        params: {
          id: this.$route.params.id
        },
        data: {
          start_time: start,
          end_time: end
        }
      }).then(res => {
        if (res.data.status === 0) {
          this.freqence = {}
          this.operation = {}
          this.oper_data = []
          this.terminal = []
          this.freqence = res.data.message.freqence
          this.operation = res.data.message.operation
          this.terminal.push(res.data.message.terminal)
          // 转换近几天U盘操作统计数据类型
          let oper_x = this.operation.oper_x
          let oper_y = this.operation.oper_y
          oper_x.forEach((one, index) => {
            let item = {}
            item.name = one
            item.value = oper_y[index]
            this.oper_data.push(item)
          })
          let colors=['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
          this.terminal.forEach(one => {
            if (one.children) {
              one.children.forEach((two, index) => {
                // 给 每个树节点添加不同颜色
                two.itemStyle = {
                  color: colors[index],
                  borderColor: colors[index]
                }
                two.department = two.name.split('-')[1]
              })
            }
            // console.log(this.terminal)
            // if (this.terminal.find(target => target.department ===))
          })
          // this.test(this.terminal)
          this.drawPie()
          this.drawLine()
          // this.drawTree()
        } else {
          this.$message({ type: 'warning', message: res.data.message })
        }
      }).catch(error => {
        this.$message({ type: 'error', message: error })
      })
    },
    grouping(data) {
      var arg=[].slice.call(arguments,1),arr=data;
      for(var i=0,l=arg.length;i<l;i++){
          var newArr = [];
          if(arr[0].constructor === Array){
              arr.forEach(function(arrChild){
                  newArr = newArr.concat(group(arrChild,arg[i]));
              })
          }else{
              newArr = group(arr,arg[i]);
          }
          arr = newArr;
      }
      // this.group(d,type)
      function group(d,type){
        var num=0,typeCount=[],map={}
        d.forEach(function(obj){
            var value = map[String(obj[type])];
            if(value !== void 0){
                typeCount[value].push(obj);
            }else{
                map[obj[type]] = num;
                typeCount[num] = [].concat([obj]);
                num++;
            }
        });
        return typeCount;
      }
      return arr;
    },
    test() {
      var data = [{
        name: "0",
        children: [{
          department: '算法部',
          name: "WA20200911F0001",
          value: 40,
        }, {
          department: '算法部',
          name: "WA20200911F0001",
          value: 24,
        }, {
          department: '研发部',
          name: "WA20200911F0001",
          value: 33,
        }, {
          department: '综合部',
          name: "WA20200911F0001",
          value: 20,
        }],
      }]
      // var data = [
      //   {name:"a",dir:"A"},
      //   {name:"a",dir:"A"},
      //   {name:"a",dir:"B"},
      //   {name:"a",dir:"B"},
      //   {name:"a",dir:"C"},
      //   {name:"b",dir:"A"},
      //   {name:"b",dir:"C"}
      //   ];
        var a = this.grouping(data,"算法部");
        console.log(a);
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-date-editor--datetimerange.el-input__inner {
  width: 350px;
}
ul, li {
  margin: 0;
}
.my_contain {
  background-color: #f0f0f0;
  .row-time {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
    .col-time {
      line-height: 32px;
      span {
        padding: 5px;
      }
      .time-link {
        cursor: pointer;
      }
    }
  }
  .row-chart {
    height: auto;
    margin-bottom: 15px;
    .col-chart-two {
      background-color: #fff;
      height: 400px;
      box-sizing: border-box;
      .col-chart-title-two {
        width: 100%;
        padding: 8px 10px;
        color: #fff;
        background-color: #c7c7c7;
        box-sizing: border-box;
      }
      .col-chart-main-two {
        width: 100%;
        height: calc(100% - 37px);
        box-sizing: border-box;
        padding: 15px;
      }
    }
    .col-chart {
      background-color: #fff;
      height: 400px;
      box-sizing: border-box;
      .col-chart-title {
        width: 100%;
        padding: 8px 10px;
        color: #fff;
        background-color: #c7c7c7;
        box-sizing: border-box;
      }
      .col-chart-main {
        width: 100%;
        height: calc(100% - 37px);
        box-sizing: border-box;
        padding: 15px;
        .seamless-warp {
          height: 333px;
          overflow: hidden;
          li {
            line-height: 37px;
          }
        }
      }
    }
  }
}
.row-div {
  margin-bottom: 15px;
}
</style>